<template>
  <n-grid :x-gap="12" :cols="4">
    <n-gi>
      <div class="light-green">
        <n-space vertical :size="12">
          <n-data-table
            :bordered="false"
            :single-line="false"
            :columns="columns"
            :data="data"
            :pagination="pagination"
          />
        </n-space>
      </div>
    </n-gi>
    <n-gi :offset="'1'">
      <div class="light-green">
        <n-button @click="showComment"> 新增 </n-button>
      </div>
    </n-gi>
    <n-gi>
      <div class="light-green">
        <n-modal
          v-model:show="showCommentModal"
          :mask-closable="true"
          preset="dialog"
          title="确认"
          content="你确认"
          positive-text="确认"
          negative-text="取消"
          @positive-click="onModelConfir"
          @negative-click="onModelCancel"
          :on-after-leave="onModelAfter"
        >
          <n-form
            ref="formRef"
            :model="commentData"
            :rules="commentRules"
            :size="size"
            label-placement="top"
          >
            <n-form-item-gi :span="12" label="评论" path="content">
              <n-input
                v-model:value="commentData.content"
                placeholder="请输入评论"
              />
            </n-form-item-gi>
            <n-form-item-gi :span="12" label="用户" path="username">
              <n-select
                label-field="username"
                value-field="id"
                children-field="whateverChildren"
                filterable
                v-model:value="commentData.userId"
                :options="commentOptions"
                placeholder="请输入用户"
              />
            </n-form-item-gi>
            <n-form-item-gi :span="12" label="商品" path="title">
              <n-select
                label-field="title"
                value-field="id"
                children-field="whateverChildren"
                filterable
                v-model:value="commentData.commodityId"
                :options="commentodityOptions"
                placeholder="请输入商品"
              />
            </n-form-item-gi>
          </n-form>
        </n-modal>
      </div>
    </n-gi>
    <n-gi :offset="1">
      <div class="light-green">
      </div>
    </n-gi>
  </n-grid>
</template>

<script>
import {
  h,
  defineComponent,
  ref,
  onMounted,
  computed,
  reactive,
  renderTooltip,
} from "vue";
import {
  createDiscreteApi,
  NDataTable,
  NGrid,
  NGi,
  NSpace,
  NTag,
  NGradientText,
  NForm,
  NFormItemGi,
  NInput,
  NSelect,
  NButton,
  NModal,
} from "naive-ui";
import { getRequest,updateRequest,deleteRequest } from "@/http/request";
const createRefData = ref([]);
const userRefData = ref([]);
const commodityRefData = ref([]);
onMounted(
  getRequest(null, `comment/queryComment`).then((res) => {
    createRefData.value = res.data.data;
  }),
  // 查询用户数据信息
  getRequest(null, `user/selectUser`).then((res) => {
    userRefData.value = res.data.data;
  }),
  getRequest(null, `commodity/selectCommodity`).then((res) => {
    commodityRefData.value = res.data.data;
  })
);
export default defineComponent({
  components: {
    NDataTable,
    createDiscreteApi,
    NGrid,
    NGi,
    NSpace,
    NTag,
    NGradientText,
    NForm,
    NFormItemGi,
    NInput,
    NSelect,
    NModal,
    NButton,
  },
  setup() {
    const message = createDiscreteApi(["message"]).message;
    const createColumns = ({ updateComment, deleteComment }) => {
      return [
        {
          title: "id",
          key: "id",
        },
        {
          key: "content",
          title: "内容",
        },
        {
          title: "创建时间",
          key: "title",
        },
        {
          title: "用户",
          key: "username",
        },
        {
          title: "操作",
          key: "actions",
          render(row) {
            return [
              h(
                NButton,
                {
                  size: "large",
                  type: "info",
                  onClick: () => deleteComment(row),
                },
                { default: () => "删除" }
              ),
              h(
                NButton,
                {
                  size: "large",
                  type: "warning",
                  onClick: () => updateComment(row),
                },
                { default: () => "修改" }
              ),
            ];
          },
        },
      ];
    };
    const showRefModel = ref(false);
    // 定义from中的值
    const commentRefData =ref({
        content: null,
        id: null,
        username:null,
        title:null,
        commodityId:null,
        userId:null
      });
    return {
      showCommentModal: showRefModel,
      // 遮照
      showComment() {
        showRefModel.value = true;
      },
      // 确认
      onModelConfir() {
        updateRequest(commentRefData.value,`comment/updateComment`).then((res => {
          console.log(res,"返回参数");
        }))
        
      },
      // 取消
      onModelCancel() {
        showRefModel.value = false;
      },
      // 商品数据信息
      commentodityOptions: commodityRefData,
      // 用户
      commentOptions: userRefData,
      commentRules: {
        content: {
          required: true,
          trigger: ["blur", "input"],
          message: "请输入 content",
        },
      },
      commentData: commentRefData,
      data: createRefData,
      columns: createColumns({
      // 修改
        updateComment(rowData) {
          showRefModel.value = true;
          commentRefData.value = rowData
        },
        deleteComment(rowData) {
          console.log(rowData.id,"参数信息");
          deleteRequest(null,"comment/deleteComment/"+rowData.id).then((res => {
            message.info(res.data.message)
          }))
        },
      }),
      // 关闭回调函数
      onModelAfter(){
        console.log("执行成功");
        commentRefData.value = {}
      },
      pagination: {
        pageSize: 10,
      },
    };
  },
});
</script>

<style scoped>
.light-green {
  height: 108px;
  background-color: rgba(0, 128, 0, 0.12);
}
.green {
  height: 108px;
  background-color: rgba(0, 128, 0, 0.24);
}
</style>